<template>
  <div class="version">
    <van-nav-bar
      title="版本信息"
      left-text="返回"
      left-arrow
      @click-left="$router.go(-1)"
    />
    <div class="item">
      <h4>当前版本信息：{{ versionNew.version }}</h4>
      <span
        >发布时间：{{
          versionNew.releaseDate ? versionNew.releaseDate.join("/") : ""
        }}</span
      >
      <div class="detail">
        <span>更新内容：</span>
        <p
          v-for="(item, index) in description(versionNew.description)"
          :key="index"
        >
          {{ item }}
        </p>
      </div>
    </div>
    <div class="hr"></div>
    <div class="item">
      <h4>历史信息</h4>
      <div class="content" v-for="(item, index) in versionList" :key="index">
        <div>v{{ item.version }}</div>
        <span
          >发布时间：{{
            item.releaseDate ? item.releaseDate.join("/") : ""
          }}</span
        >
        <div class="detail">
          <span>更新内容：</span>
          <p
            v-for="(item, index) in description(item.description)"
            :key="index"
          >
            {{ item }}
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getVersionList } from "@/api/common/common";

export default {
  name: "VersionView",
  data() {
    return {
      versionList: [],
      versionNew: {},
    };
  },
  created() {
    this.getVersionList();
  },
  methods: {
    async getVersionList() {
      const res = await getVersionList();
      const list = res.data.reverse();
      this.versionNew = list.shift();
      this.versionList = list;
    },
    // 格式化更新内容
    description(str) {
      return str ? str.split("\n") : "";
    },
  },
};
</script>

<style lang="less" scoped>
.version {
  min-height: 100vh;
  .item {
    margin: 10px 16px;
    line-height: 1.5;
    span {
      font-size: 14px;
    }
    .detail {
      color: #666;
      font-size: 12px;
    }
    .content {
      margin-top: 10px;
      border-bottom: 1px solid #eee;
    }
  }
  .hr {
    margin: 0 10px;
    height: 1px;
    border: 1px solid #eee;
  }
}
</style>